<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xf="http://www.w3.org/2002/xforms"
      xmlns:ev="http://www.w3.org/2001/xml-events"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xmlns:xsd="http://www.w3.org/2001/XMLSchema"
      lang="de">
<head>
    <title>All Chiba Components</title>


    <xf:model id="model-1">
        <xf:instance id="instance-1" xmlns="">
            <data>
                <input constraint="true" readonly="false" required="true" relevant="true">
                    <value></value>
                </input>
                <input constraint="true" readonly="false" required="true" relevant="true">
                    <value>true</value>
                </input>
                <input constraint="true" readonly="false" required="true" relevant="true">
                    <value>2007-11-11</value>
                </input>
                <range constraint="true" readonly="false" required="true" relevant="true">
                    <value>5</value>
                </range>
                <range constraint="true" readonly="false" required="true" relevant="true">
                    <value>3</value>
                </range>
                <secret constraint="true" readonly="false" required="true" relevant="true">
                    <value>password</value>
                </secret>
                <output constraint="true" readonly="true" required="true" relevant="true">
                    <value>foo</value>
                </output>
                <output constraint="true" readonly="true" required="true" relevant="true">
                    <value>http://chiba.sourceforge.net</value>
                </output>
                <output constraint="true" readonly="true" required="true" relevant="true">
                    <value><![CDATA[<b>Providing</b> <i>basic</i> HTML <u>formatting</u>]]></value>
                </output>
                <output constraint="true" readonly="true" required="true" relevant="true">
                    <value>../resources/images/chiba50t.gif</value>
                </output>
                <textarea constraint="true" readonly="false" required="true" relevant="true">
                    <value>Enter your text here. If the text is to long the textarea pane scrolls</value>
                </textarea>
                <textarea constraint="true" readonly="false" required="true" relevant="true">
                    <value><![CDATA[
                    <div style="color:darkblue;font-weight:bolder;">Textarea</div><div style="color:black;font-weight:normal;"> with <i>mediatype='text/html'</i>
                    <ul>
                        <li>Textarea based on <a href="http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/advanced-editing-and-display/editor-rich-text" target="_blank">dijit.Editor</a></li>
                        <li>other Inline Editors can be plugged in easily</li>
                        <li><a href="http://www.w3.org/TR/xforms/#ui-textarea" target="_blank">W3C XForms 1.0 Textarea Specification</a></li>
                    </ul>
                    </div>
                    ]]></value>
                </textarea>
                <textarea constraint="true" readonly="false" required="true" relevant="true">
                    <value>Enter some more text and see how the textarea grows</value>
                </textarea>
                <upload constraint="true" readonly="false" required="true" relevant="true">
                    <value type="" file=""/>
                </upload>
                <trigger constraint="true" readonly="false" required="true" relevant="true">
                    <value/>
                    <label>Trigger 1</label>
                </trigger>
                <trigger constraint="true" readonly="false" required="true" relevant="true">
                    <value/>
                    <label>Trigger 2</label>
                </trigger>
                <trigger constraint="true" readonly="false" required="true" relevant="true">
                    <value/>
                    <label>Trigger 3</label>
                </trigger>
                <trigger constraint="true" readonly="false" required="true" relevant="true">
                    <value/>
                    <label>Debug (all)</label>
                </trigger>
                <trigger constraint="true" readonly="false" required="true" relevant="true">
                    <value/>
                    <label>Debug (partial)</label>
                </trigger>
                <trigger constraint="true" readonly="false" required="true" relevant="true">
                    <value/>
                    <label>Load (new)</label>
                </trigger>
                <trigger constraint="true" readonly="false" required="true" relevant="true">
                    <value/>
                    <label>Load (new)</label>
                </trigger>
            </data>
        </xf:instance>

    <xf:bind nodeset="input[1]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="input[2]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"
                 type="boolean"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="input[3]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"
                 type="date"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="range[1]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"
                 type="integer"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="range[2]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"
                 type="integer"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="secret">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="output[1]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="output[2]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"
                 type="anyURI"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="output[3]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="output[4]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="textarea[1]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="textarea[2]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="textarea[3]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="upload[1]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"
                 type="anyURI"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="trigger[1]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="trigger[2]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>


        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="trigger[3]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="trigger[4]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="trigger[5]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="trigger[6]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="trigger[7]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>


    <xf:instance id="lang" xmlns="">
        <strings selected="">
            <string key="">
                <lang code="de">deutsch</lang>
                <lang code="en">english</lang>
            </string>
        </strings>
    </xf:instance>

    </xf:model>

<xf:model id="countries">
    <xf:submission id="s-debug-all-codes"
                   action="{$contextroot}/resources/jsp/debug-instance.jsp"
                   method="post"
                   replace="all"
                   validate="false"/>

    <xf:submission id="s-debug-one-code"
                   action="{$contextroot}/resources/jsp/debug-instance.jsp"
                   method="post"
                   replace="all"
                   ref="instance('codes')/country[1]"
                   validate="false"/>

    <xf:instance xmlns="">
        <data>
            <select1 constraint="true" readonly="false" required="true" relevant="true">
                <value/>
            </select1>
            <select1 constraint="true" readonly="false" required="true" relevant="true">
                <value/>
            </select1>
            <select1 constraint="true" readonly="false" required="true" relevant="true">
                <value/>
            </select1>
            <select1 constraint="true" readonly="false" required="true" relevant="true">
                <value/>
            </select1>
            <select constraint="true" readonly="false" required="true" relevant="true">
                <value/>
            </select>
            <select constraint="true" readonly="false" required="true" relevant="true">
                <value/>
            </select>
            <select constraint="true" readonly="false" required="true" relevant="true">
                <value/>
            </select>
        </data>
    </xf:instance>

    <xf:bind nodeset="select1[1]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="select1[2]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="select1[3]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="select1[4]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="select[1]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:bind nodeset="select[2]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>
    <xf:bind nodeset="select[3]">
        <xf:bind nodeset="value"
                 constraint="boolean-from-string(../@constraint)"
                 readonly="boolean-from-string(../@readonly)"
                 required="boolean-from-string(../@required)"
                 relevant="boolean-from-string(../@relevant)"/>

        <xf:bind nodeset="@constraint" type="boolean"/>
        <xf:bind nodeset="@readonly" type="boolean"/>
        <xf:bind nodeset="@required" type="boolean"/>
        <xf:bind nodeset="@relevant" type="boolean"/>
    </xf:bind>

    <xf:instance id="codes" xmlns="">
        <countrylist lang="en">
            <country>
                <country-name>AFGHANISTAN</country-name>
                <code>AF</code>
            </country>
            <country>
                <country-name>LAND ISLANDS</country-name>
                <code>AX</code>
            </country>
            <country>
                <country-name>ALBANIA</country-name>
                <code>AL</code>
            </country>
            <country>
                <country-name>ALGERIA</country-name>
                <code>DZ</code>
            </country>
            <country>
                <country-name>AMERICAN SAMOA</country-name>
                <code>AS</code>
            </country>
            <country>
                <country-name>ANDORRA</country-name>
                <code>AD</code>
            </country>
            <country>
                <country-name>ANGOLA</country-name>
                <code>AO</code>
            </country>
            <country>
                <country-name>ANGUILLA</country-name>
                <code>AI</code>
            </country>
            <country>
                <country-name>ANTARCTICA</country-name>
                <code>AQ</code>
            </country>
        </countrylist>
    </xf:instance>
</xf:model>

<style type="text/css">


#control-attributes {
    width: 800px;
    border: 1px dotted black;
    margin: 0;
    padding: 5px;
}

#input-attributes .disabled {
    display: none;
}

#input-attributes label {
    width: 7em;
    float: none;
}

#outer {
    margin:0px;
    padding:0px;
}

#switch1 .case .input, .select1 {
    margin-top: 15px;

}

.boolean {
    margin: 1pt;
}

#triggerpane tr {
    margin-bottom: 10px;
    display: block;
}

.xfControl {
    margin-bottom: 16px;
    valign: top;
}

.xfControl .xfLabel {
    width: 160px;
    text-align: right;
    vertical-align: top;
}



.xfInput .xfLabel,
    .xfSecret .xfLabel,
    .xfUpload .xfLabel,
    .xfOutput .xfLabel {
    width: 200px;
    text-align: right;
    float: left;
    padding-right:5px;
}

.xfControl select {
    background-color: white;
}

.dijitButtonHover .dijitButtonNode,
    .dijitButtonNodeHover,
    .dijitToggleButtonHover .dijitButtonNode,
    .dijitDropDownButtonHover .dijitButtonNode,
    .dijitComboButtonHover .dijitButtonContents,
    .dijitComboButtonDownArrowHover .dijitDownArrowButton,
    .dijitComboBoxHover .dijitDownArrowButton,
    .dijitSpinnerUpArrowHover .dijitUpArrowButton,
    .dijitSpinnerDownArrowHover .dijitDownArrowButton {
    border: 0;
    background:transparent;
}

html, body, #main{
    width: 100%;	/* make the body expand to fill the visible window */
    height: 100%;
    overflow: hidden;	/* erase window level scrollbars */
    padding: 0 0 0 0;
    margin: 0 0 0 0;
    font: 10pt Arial,Myriad,Tahoma,Verdana,sans-serif;
}

.dijitBorderContainer {
    position:absolute;
}

.xfSelect .xfLabel,
    .xfSelect1 .xfLabel {
    width: 140px;
    text-align: right;
    float: left;
    padding-right:5px;
}

.xfSelectorItem .xfLabel {
    width: 140px;
    text-align: right;
    display: inline;
    float: none;
    padding-right:5px;
}

.xfRange .xfLabel {
    width: 100px;
    display: block;
    text-align: left;
    float: left;
    padding-right:5px;
}

.xfUpload.xfLabel {
    width: 110px;
}

.xfRange .xfHelpIcon {
    float: none;
    display: block;
}

.xfTextarea .xfLabel {
    width: 200px;
    text-align: left;
    display: block;
    float: left;
}

.xfTextarea .xfHelpIcon {
    float: none;
    display: block;
}

.xfTrigger {
    width: 140px;
}

.xfHelpIcon {
    float: left;
}

.row {
    height: 50px;

}

.entry {
    padding-right: 10px;
    vertical-align: top;
}

.mips {
    margin: 0;
    padding: 0;
    border: none;
}

.mips .xfLabel {
    width: 80px;
    text-align: left;
    position: absolute;
    left: 45px;
}



#reportBug{
    display:inline;
}

#caSelect1Table{
    padding-left:0px;
    padding-top:15px;
}

#widgetsContainer{
/*
    padding-left:40px;
    padding-top:40px;
*/
    padding:0;
}
#switch1{
    margin:20px;
}
</style>

</head>
<body class="tundra"  style="width:100%;height:100%;margin:0;padding:0;overflow:hidden;" >
<div dojotype="dijit.layout.ContentPane" id="widgetsContainer">

    <xf:switch appearance="dijit:TabContainer" id="switch1" style="width:90%;">
        <xf:case name="switch-toggles" selected="false">
            <xf:trigger id="t-intro">
                <xf:label/>
                <xf:toggle case="intro"/>
            </xf:trigger>
            <xf:trigger id="t-input">
                <xf:label/>
                <xf:toggle case="input"/>
            </xf:trigger>
            <xf:trigger id="t-output">
                <xf:label/>
                <xf:toggle case="output"/>
            </xf:trigger>
            <xf:trigger id="t-range">
                <xf:label/>
                <xf:toggle case="range"/>
            </xf:trigger>
            <xf:trigger id="t-select1">
                <xf:label/>
                <xf:toggle case="select1"/>
            </xf:trigger>
            <xf:trigger id="t-select">
                <xf:label/>
                <xf:toggle case="select"/>
            </xf:trigger>
            <xf:trigger id="t-textarea">
                <xf:label/>
                <xf:toggle case="textarea"/>
            </xf:trigger>
            <xf:trigger id="t-trigger">
                <xf:label/>
                <xf:toggle case="trigger"/>
            </xf:trigger>
<!--
            <xf:trigger id="t-upload">
                <xf:label/>
                <xf:toggle case="upload"/>
            </xf:trigger>
-->
            <xf:trigger id="t-source">
                <xf:label/>
                <xf:toggle case="source"/>
            </xf:trigger>
        </xf:case>
<xf:case id="intro" selected="true">
    <xf:label>INTRO</xf:label>

    <div style="margin:10px;font-size:14pt;border:thin dotted;padding:0px 50px 50px 50px;background-color:#eee;height:80%;">
        <br/>
        Chiba Widget Set
        <br/><br/>
        <div style="font-size:11pt;">
            This page serves several purposes:
            <ul>
                <li>as a Demo of a complex form</li>
                <li>as live reference for how to use certain Controls</li>
                <li>as primary test case</li>
            </ul>

            Features:
            <ul>
                <li>shows all controls in all possible XForms states</li>
                <li>show proper keyboard navigation. Tab are navigatable with left/right arrows. Note that only
                the controls will get focus. Helper elements/buttons have been excluded from navigation.</li>
                <!--<li>show code snippets as help - not complete yet</li>-->
                <li>show locally rendered validation error messages</li>
                <li>error indicator icon rendered on tabs with contain invalid controls</li>
                <li>switch mouse cursor when hovering readonly controls</li>
            </ul>


        </div>
    </div>
</xf:case>

<xf:case id="input" class="caInput">

<xf:label>Input</xf:label>
<table class="caInputTable">
<tr>
    <td/>
    <td align="center" width="9%;"/>
</tr>

<tr class="row">
    <td class="entry" valign="top">
        <xf:input ref="input[1]/value">
            <xf:label>a standard input</xf:label>
            <xf:hint>This is a standard input control</xf:hint>
            <!-- <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>readonly</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td><i>boolean</i>,<i>date</i>,<i>float</i>,<i>decimal</i>,<b><i>string</i></b></td>
                </tr>
            </table>
            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>incremental</td>
                    <td><i>true</i> or <b><i>false</i></b></td>
                </tr>
            </table>
<pre>&lt;xf:bind nodeset="input[1]/value"
        type="string"
        readonly="true()
        constraint="boolean-from-string(.)=true()" /&gt;
&lt;xf:input ref="input[1]/value" incremental="true"&gt;
    &lt;xf:label&gt;a standard input&lt;/xf:label&gt;
    &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
    &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
    &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
&lt;/xf:input&gt;</pre>
            </xf:help> -->
            <xf:alert>A value for standard input is required</xf:alert>
        </xf:input>
    </td>
    <td valign="top">
        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                <table width="120px;" cellspacing="5px">
                    <tr>
                        <td>
                            <xf:input navindex="-1" style="width:10px;" ref="input[1]/@readonly" class="mips"
                                      incremental="true">
                                <xf:label>readonly</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[1]/@required" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>required</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[1]/@relevant" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>relevant</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[1]/@constraint" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>valid</xf:label>
                            </xf:input>
                        </td>
                    </tr>

                </table>
            </div>
        </div>
    </td>
</tr>

<tr class="row">
    <td class="entry">
        <xf:input ref="input[2]/value">
            <xf:label>a boolean input</xf:label>
            <xf:hint>This is a input control bound to a boolean node</xf:hint>
            <!-- <xf:help>see standard input help</xf:help> -->
            <xf:alert>A value for boolean input is required</xf:alert>
        </xf:input>
    </td>
    <td valign="top">
        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                <table width="120px;" cellspacing="5px">
                    <tr>
                        <td>
                            <xf:input navindex="-1" style="width:10px;" ref="input[2]/@readonly" class="mips"
                                      incremental="true">
                                <xf:label>readonly</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[2]/@required" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>required</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[2]/@relevant" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>relevant</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[2]/@constraint" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>valid</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </td>

</tr>
<tr class="row">
    <td class="entry">
        <xf:input ref="input[3]/value">
            <xf:label>a date input</xf:label>
            <xf:hint>This is a input control bound to a date node</xf:hint>
            <!-- <xf:help>see standard input help</xf:help> -->
            <xf:alert>A value for date input is required</xf:alert>
        </xf:input>
    </td>
    <td valign="top">
        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                <table width="120px;" cellspacing="5px">
                    <tr>
                        <td>
                            <xf:input navindex="-1" style="width:10px;" ref="input[3]/@readonly" class="mips"
                                      incremental="true">
                                <xf:label>readonly</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[3]/@required" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>required</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[3]/@relevant" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>relevant</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="input[3]/@constraint" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>valid</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </td>
</tr>
<tr class="row">
    <td class="entry">
        <xf:secret ref="secret/value">
            <xf:label>secret</xf:label>
            <!-- <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>readonly</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
            </table>
            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>incremental</td>
                    <td><i>true</i> or <b><i>false</i></b></td>
                </tr>
            </table>
<pre>&lt;xf:secret ref="secret/value"&gt;
   &lt;xf:label&gt;secret control for passwords&lt;/xf:label&gt;
   &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
   &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
   &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
&lt;/xf:secret&gt;
</pre>
            </xf:help> -->
            <xf:hint>secret hint</xf:hint>
            <xf:hint>hint text</xf:hint>
            <xf:alert>A value for secret control is required</xf:alert>
        </xf:secret>
    </td>
    <td valign="top">
        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                <table width="120px;" cellspacing="5px">
                    <tr>
                        <td>
                            <xf:input navindex="-1" style="width:10px;" ref="secret[1]/@readonly" class="mips"
                                      incremental="true">
                                <xf:label>readonly</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="secret[1]/@required" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>required</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="secret[1]/@relevant" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>relevant</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input navindex="-1" ref="secret[1]/@constraint" style="width:10px;" class="mips"
                                      incremental="true">
                                <xf:label>valid</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </td>

</tr>

</table>
</xf:case>


<xf:case id="output" class="caOutput">
    <xf:label>Output</xf:label>

    <table class="caOutputTable">
        <tr>
            <td/>
            <td align="center" width="9%"/>
        </tr>

        <tr class="row">
            <td class="entry">
                <xf:output ref="output[1]/value" mediatype="text">
                    <xf:label>a standard output</xf:label>
                    <xf:hint>This is a standard output control</xf:hint>
                    <!-- <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td><i>anyURI</i>,<i>html</i><b><i>string</i></b></td>
                </tr>

            </table>

            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>mediatype</td>
                    <td><b><i>text</i></b>,<i>text/html</i>,<i>image/gif</i></td>
                </tr>
            </table>

<pre>&lt;xf:output ref="output[1]/value" mediatype="text"&gt;
   &lt;xf:label&gt;a standard output&lt;/xf:label&gt;
   &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
   &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
   &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
&lt;/xf:output&gt;
</pre>
            </xf:help> -->
                    <xf:alert>A value for standard output is required</xf:alert>
                </xf:output>
            </td>
            <td valign="top">
                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                        <table width="120px;" cellspacing="5px">
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="output[1]/@relevant" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>relevant</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>

                                <td>
                                    <xf:input ref="output[1]/@constraint" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>constraint</xf:label>
                                    </xf:input>
                                </td>


                            </tr>
                        </table>
                    </div>

                </div>
            </td>
        </tr>
        <tr class="row">
            <td class="entry">
                <xf:output ref="output[2]/value">
                    <xf:label>anyURI output</xf:label>
                    <xf:hint>This is a output control bound to an anyURI typed node</xf:hint>
                    <!-- <xf:help>see standard output</xf:help> -->
                    <xf:alert>A value for standard output is required</xf:alert>
                </xf:output>
            </td>
            <td valign="top">
                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                        <table width="120px;" cellspacing="5px">
                            <tr>
                                <td>
                                    <xf:input ref="output[2]/@relevant" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>relevant</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input ref="output[2]/@constraint" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>constraint</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="row">
            <td class="entry">
                <xf:output ref="output[3]/value" mediatype="text/html">
                    <xf:label>mediatype text/html</xf:label>
                    <xf:hint>This is a output control with mediatype=text/html </xf:hint>
                    <!-- <xf:help>see standard output</xf:help> -->
                    <xf:alert>A value for standard output is required</xf:alert>
                </xf:output>
            </td>
            <td valign="top">
                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                        <table width="120px;" cellspacing="5px">
                            <tr>
                                <td>
                                    <xf:input ref="output[3]/@relevant" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>relevant</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input ref="output[3]/@constraint" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>constraint</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
        <tr class="row">
            <td class="entry">
                <xf:output ref="output[4]/value" mediatype="image/gif">
                    <xf:label>mediatype image/gif</xf:label>
                    <xf:hint>This is an output control with mediatype image/gif</xf:hint>
                    <!-- <xf:help>see standard output</xf:help> -->
                    <xf:alert>A value for standard output is required</xf:alert>
                </xf:output>
            </td>
            <td valign="top">
                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                        <table width="120px;" cellspacing="5px">
                            <tr>
                                <td>
                                    <xf:input ref="output[4]/@relevant" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>relevant</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>

                                <td>
                                    <xf:input ref="output[4]/@constraint" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>constraint</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>

</xf:case>

<xf:case id="range" selected="false">
    <xf:label>Range</xf:label>
    <table>
        <tr>
            <td/>
            <td align="center" width="9%;"/>
        </tr>

        <tr class="row">
            <td class="entry">
                <xf:range start="2" end="10" step="1" ref="range[1]/value">
                    <xf:label>a range control</xf:label>
                    <xf:hint>a range hint</xf:hint>
                    <!-- <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>readonly</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
            </table>
            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>incremental</td>
                    <td><i>true</i> or <b><i>false</i></b></td>
                </tr>
            </table>
<pre>&lt;xf:range start="2" end="10" step="1" ref="range[1]/value"&gt;
   &lt;xf:label&gt;a range control&lt;/xf:label&gt;
   &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
   &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
   &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
&lt;/xf:range&gt;
</pre>
                    </xf:help> -->
                    <xf:alert>Must be greater 5</xf:alert>
                </xf:range>
            </td>
            <td valign="top">
                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                        <table width="120px;" cellspacing="5px">
                            <tr>
                                <td>
                                    <xf:input navindex="-1" style="width:10px;" ref="range[1]/@readonly" class="mips"
                                              incremental="true">
                                        <xf:label>readonly</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="range[1]/@required" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>required</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="range[1]/@relevant" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>relevant</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="range[1]/@constraint" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>valid</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>

        </tr>
        <tr class="row">
            <td class="entry">
                <xf:range end="5" ref="range[2]/value" appearance="chiba:rating">
                    <xf:label>a range control</xf:label>
                    <xf:hint>a range hint</xf:hint>
                    <!-- <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>readonly</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
            </table>
            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>incremental</td>
                    <td><i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>appearance</td>
                    <td></td>
                </tr>

            </table>
<pre>&lt;xf:range end="5" ref="range[2]/value" appearance="chiba:rating"&gt;
    &lt;xf:label&gt;a range control&lt;/xf:label&gt;
    &lt;xf:label&gt;a range control&lt;/xf:label&gt;
    &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
    &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
    &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
&lt;/xf:range&gt;
</pre>
                    </xf:help> -->
                    <xf:alert>Must be greater 5</xf:alert>
                </xf:range>
            </td>
            <td valign="top">
                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                        <table width="120px;" cellspacing="5px">
                            <tr>
                                <td>
                                    <xf:input navindex="-1" style="width:10px;" ref="range[2]/@readonly" class="mips"
                                              incremental="true">
                                        <xf:label>readonly</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="range[2]/@required" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>required</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="range[2]/@relevant" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>relevant</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="range[2]/@constraint" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>valid</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>

        </tr>
    </table>
</xf:case>

<!-- ***** SELECT1 ***** -->
<xf:case id="select1" selected="false">
<xf:label>Select1</xf:label>
            <table id="caSelect1Table">
            <tr>
                <td/>
                <td align="center" width="9%;"/>
            </tr>

            <tr class="row">
                <td class="entry">
                    <xf:select1 model="countries" ref="select1[1]/value">
                        <xf:label>minimal</xf:label>
                        <xf:hint>select1 appearance='minimal'</xf:hint>
                        <!-- <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>readonly</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
            </table>
            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>incremental</td>
                    <td><i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>appearance</td>
                    <td></td>
                </tr>

            </table>
<pre>&lt;xf:select1 model="countries" ref="select1[1]/value"&gt;
    &lt;xf:label&gt;standard select1 [appearance='minimal']&lt;/xf:label&gt;
    &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
    &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
    &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
    &lt;xf:itemset nodeset="instance('codes')/country"&gt;
        &lt;xf:label ref="country-name"/&gt;
        &lt;xf:value ref="code"/&gt;
    &lt;/xf:itemset&gt;
&lt;/xf:select1&gt;
</pre>
                        </xf:help> -->
                        <xf:alert>The select value is not valid</xf:alert>
                        <xf:itemset nodeset="instance('codes')/country">
                            <xf:label ref="country-name"/>
                            <xf:value ref="code"/>
                        </xf:itemset>
                    </xf:select1>
                </td>
                <td valign="top">
                    <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                        <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                            <table width="120px;" cellspacing="5px">
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" style="width:10px;" ref="select1[1]/@readonly"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>readonly</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[1]/@required" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>required</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[1]/@relevant" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>relevant</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[1]/@constraint" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>valid</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>

            </tr>

            <tr class="row">
                <td class="entry">
                    <xf:select1 model="countries" ref="select1[2]/value" appearance="compact">
                        <xf:label>compact</xf:label>
                        <xf:hint>select1 appearance='compact'</xf:hint>
                        <!-- <xf:help>see standard select1 [appearance='minimal']</xf:help> -->
                        <xf:choices>
                            <xf:item>
                                <xf:label>foo</xf:label>
                                <xf:value>foo</xf:value>
                            </xf:item>
                            <xf:item>
                                <xf:label>bar</xf:label>
                                <xf:value>bar</xf:value>
                            </xf:item>
                            <xf:item>
                                <xf:label>baz</xf:label>
                                <xf:value>baz</xf:value>
                            </xf:item>
                        </xf:choices>
                    </xf:select1>
                </td>
                <td valign="top">
                    <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                        <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                            <table width="120px;" cellspacing="5px">
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" style="width:10px;" ref="select1[2]/@readonly"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>readonly</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[2]/@required" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>required</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[2]/@relevant" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>relevant</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[2]/@constraint" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>valid</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>

            <tr class="row">
                <td class="entry">
                    <xf:select1 model="countries" ref="select1[3]/value" appearance="full">
                        <xf:label>full</xf:label>
                        <xf:hint>select1 appearance='full'</xf:hint>
                        <!-- <xf:help>see standard select1 [appearance='minimal']*</xf:help> -->
                        <xf:hint>select hint</xf:hint>
                        <xf:alert>The input value is not valid</xf:alert>

                        <xf:choices>
                            <xf:item>
                                <xf:label>foo</xf:label>
                                <xf:value>foo</xf:value>
                            </xf:item>
                            <xf:item>
                                <xf:label>bar</xf:label>
                                <xf:value>bar</xf:value>
                            </xf:item>
                            <xf:item>
                                <xf:label>baz</xf:label>
                                <xf:value>baz</xf:value>
                            </xf:item>
                        </xf:choices>
                    </xf:select1>
                </td>
                <td valign="top">
                    <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                        <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                            <table width="120px;" cellspacing="5px">
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" style="width:10px;" ref="select1[3]/@readonly"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>readonly</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[3]/@required" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>required</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[3]/@relevant" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>relevant</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[3]/@constraint" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>valid</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
            </table>
            <table>
            <tr class= "row">
                <td class="entry">
                    <xf:select1 model="countries" ref="select1[4]/value" selection="open" appearance="minimal">
                        <xf:label>selection open</xf:label>
                        <xf:hint>select1 selection='open'</xf:hint>                        
                        <!-- <xf:help>see standard select1 [appearance='minimal'] help</xf:help> -->
                        <xf:hint>select hint</xf:hint>
                        <xf:alert>The input value is not valid</xf:alert>

                        <xf:choices>
                            <xf:item>
                                <xf:label>foo</xf:label>
                                <xf:value>foo</xf:value>
                            </xf:item>
                            <xf:item>
                                <xf:label>bar</xf:label>
                                <xf:value>bar</xf:value>
                            </xf:item>
                            <xf:item>
                                <xf:label>baz</xf:label>
                                <xf:value>baz</xf:value>
                            </xf:item>
                        </xf:choices>
                    </xf:select1>
                </td>
                <td valign="top">
                    <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                        <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                            <table width="120px;" cellspacing="5px">
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" style="width:10px;" ref="select1[4]/@readonly"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>readonly</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[4]/@required" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>required</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[4]/@relevant" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>relevant</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <xf:input model="countries" navindex="-1" ref="select1[4]/@constraint" style="width:10px;"
                                                  class="mips"
                                                  incremental="true">
                                            <xf:label>valid</xf:label>
                                        </xf:input>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </td>
            </tr>
            <tr class= "row">
                <td class="entry">
                    <div id="dojo-sample1" class="xfControl xfSelect1 xsdString xfEnabled xfReadWrite xfRequired xfValid">
                        <label for="dojo-sample1" id="dojo-sample1-label" class="xfLabel">in dialog</label>
                        <div style="float:left;height:5px;width:24px;" tabindex="-1" ></div>
                        <span id="dojo-sample1-helptext" class="xfHelpText" style="display:none;"><b>Syntax:</b><br/>
                        </span>

                        <div id="dojo-sample1-value" class="xfValue">
                            <div dojoType="dijit.form.DropDownButton" label="click me">
                                <div dojoType="dijit.TooltipDialog">
                                    <table>
                                        <tr class="row">
                                            <td class="entry">
                                                <xf:select1 model="countries" ref="select1[3]/value" appearance="full">
                                                    <xf:label>standard select1 [appearance='full']</xf:label>
                                                    <!-- <xf:help>see standard select1 [appearance='minimal']*</xf:help> -->
                                                    <xf:hint>select hint</xf:hint>
                                                    <xf:alert>The input value is not valid</xf:alert>

                                                    <xf:choices>
                                                        <xf:item>
                                                            <xf:label>foo</xf:label>
                                                            <xf:value>foo</xf:value>
                                                        </xf:item>
                                                        <xf:item>
                                                            <xf:label>bar</xf:label>
                                                            <xf:value>bar</xf:value>
                                                        </xf:item>
                                                        <xf:item>
                                                            <xf:label>baz</xf:label>
                                                            <xf:value>baz</xf:value>
                                                        </xf:item>
                                                    </xf:choices>
                                                </xf:select1>
                                            </td>
                                            <td valign="top">
                                                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                                                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                                        <table width="120px;" cellspacing="5px">
                                                            <tr>
                                                                <td>
                                                                    <xf:input model="countries" navindex="-1" style="width:10px;"
                                                                              ref="select1[3]/@readonly"
                                                                              class="mips"
                                                                              incremental="true">
                                                                        <xf:label>readonly</xf:label>
                                                                    </xf:input>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <xf:input model="countries" navindex="-1"
                                                                              ref="select1[3]/@required" style="width:10px;"
                                                                              class="mips"
                                                                              incremental="true">
                                                                        <xf:label>required</xf:label>
                                                                    </xf:input>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <xf:input model="countries" navindex="-1"
                                                                              ref="select1[3]/@relevant" style="width:10px;"
                                                                              class="mips"
                                                                              incremental="true">
                                                                        <xf:label>relevant</xf:label>
                                                                    </xf:input>
                                                                </td>
                                                            </tr>
                                                            <tr>
                                                                <td>
                                                                    <xf:input model="countries" navindex="-1"
                                                                              ref="select1[3]/@constraint" style="width:10px;"
                                                                              class="mips"
                                                                              incremental="true">
                                                                        <xf:label>valid</xf:label>
                                                                    </xf:input>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            </table>
</xf:case>


<!-- ***** SELECT ***** -->
<xf:case id="select" selected="false">
<xf:label>Select</xf:label>
<table>
<tr>
    <td/>
    <td align="center" width="9%;"/>
</tr>

<tr class="row">
    <td class="entry">
        <xf:select model="countries" ref="select[1]/value">
            <xf:label>minimal</xf:label>
            <xf:hint>a standard select with appearance='minimal '</xf:hint>
            <xf:alert>The input value is not valid</xf:alert>
            <!-- <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>readonly</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
            </table>
            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>incremental</td>
                    <td><i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>appearance</td>
                    <td></td>
                </tr>

            </table>
<pre>&lt;xf:bind nodeset="select[1]/value"/&gt;
&lt;xf:instance id="codes" xmlns=""&gt;
    &lt;countrylist lang="en"&gt;
        &lt;country&gt;
            &lt;country-name&gt;AFGHANISTAN&lt;/country-name&gt;
            &lt;code&gt;AF&lt;/code&gt;
        &lt;/country&gt;
        &lt;country&gt;
            &lt;country-name&gt;LAND ISLANDS&lt;/country-name&gt;
            &lt;code&gt;AX&lt;/code&gt;
        &lt;/country&gt;
    &lt;/countrylist&gt;
&lt;/xf:instance&gt;
&lt;xf:select model="countries" ref="select[1]/value"&gt;
    &lt;xf:label&gt;a standard select with minimal appearance&lt;/xf:label&gt;
    &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
    &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
    &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
    &lt;xf:itemset nodeset="instance('codes')/country"&gt;
        &lt;xf:label ref="country-name"/&gt;
        &lt;xf:value ref="code"/&gt;
    &lt;/xf:itemset&gt;
&lt;/xf:select&gt;
</pre>
            </xf:help> -->
            <xf:itemset nodeset="instance('codes')/country">
                <xf:label ref="country-name"/>
                <xf:value ref="code"/>
            </xf:itemset>
        </xf:select>
    </td>
    <td valign="top">
        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                <table width="120px;" cellspacing="5px">
                    <tr>
                        <td>
                            <xf:input model="countries" navindex="-1" style="width:10px;" ref="select[1]/@readonly"
                                      class="mips"
                                      incremental="true">
                                <xf:label>readonly</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input model="countries" navindex="-1" ref="select[1]/@required" style="width:10px;"
                                      class="mips"
                                      incremental="true">
                                <xf:label>required</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input model="countries" navindex="-1" ref="select[1]/@relevant" style="width:10px;"
                                      class="mips"
                                      incremental="true">
                                <xf:label>relevant</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input model="countries" navindex="-1" ref="select[1]/@constraint" style="width:10px;"
                                      class="mips"
                                      incremental="true">
                                <xf:label>valid</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </td>
</tr>

<tr class="row">
    <td class="entry">
        <xf:select model="countries" ref="select[2]/value" appearance="full">
            <xf:label>full</xf:label>
            <xf:hint>a standard select with appearance='full '</xf:hint>
            <!-- <xf:help>see standard select [appearance='minimal']*</xf:help> -->
            <xf:alert>The select value is not valid</xf:alert>

            <xf:choices>
                <xf:item>
                    <xf:label>foo</xf:label>
                    <xf:value>foo</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>bar</xf:label>
                    <xf:value>bar</xf:value>
                </xf:item>
                <xf:item>
                    <xf:label>baz</xf:label>
                    <xf:value>baz</xf:value>
                </xf:item>
            </xf:choices>
        </xf:select>
    </td>
    <td valign="top">
        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                <table width="120px;" cellspacing="5px">
                    <tr>
                        <td>
                            <xf:input model="countries" navindex="-1" style="width:10px;" ref="select[2]/@readonly"
                                      class="mips"
                                      incremental="true">
                                <xf:label>readonly</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input model="countries" navindex="-1" ref="select[2]/@required" style="width:10px;"
                                      class="mips"
                                      incremental="true">
                                <xf:label>required</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input model="countries" navindex="-1" ref="select[2]/@relevant" style="width:10px;"
                                      class="mips"
                                      incremental="true">
                                <xf:label>relevant</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <xf:input model="countries" navindex="-1" ref="select[2]/@constraint" style="width:10px;"
                                      class="mips"
                                      incremental="true">
                                <xf:label>valid</xf:label>
                            </xf:input>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </td>
</tr>
<tr>
    <td class="entry">
        <div id="dojo-sample2" class="xfControl xfSelect1 xsdString xfEnabled xfReadWrite xfRequired xfValid">
            <label for="dojo-sample2" id="dojo-sample2-label" class="xfLabel">in dialog</label>
            <div style="float:left;height:5px;width:24px;" tabindex="-1" ></div>
            <div id="dojo-sample2-helptext" class="xfHelpText" style="display:none;"><b>Syntax:</b><br/></div>


            <div id="dojo-sample2-value" class="xfValue">
                <div dojoType="dijit.form.DropDownButton" label="click me">
                    <div dojoType="dijit.TooltipDialog">
                        <table>
                            <tr class="row">
                                <td class="entry">
                                    <xf:select model="countries" ref="select[2]/value" appearance="full">
                                        <xf:label>a standard select with full appearance'</xf:label>
                                        <!-- <xf:help>see standard select [appearance='minimal']*</xf:help> -->
                                        <xf:hint>select hint</xf:hint>
                                        <xf:choices>
                                            <xf:item>
                                                <xf:label>foo</xf:label>
                                                <xf:value>foo</xf:value>
                                            </xf:item>
                                            <xf:item>
                                                <xf:label>bar</xf:label>
                                                <xf:value>bar</xf:value>
                                            </xf:item>
                                            <xf:item>
                                                <xf:label>baz</xf:label>
                                                <xf:value>baz</xf:value>
                                            </xf:item>
                                        </xf:choices>
                                    </xf:select>
                                </td>
                                <td valign="top">
                                    <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                                        <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                            <table width="120px;" cellspacing="5px">
                                                <tr>
                                                    <td>
                                                        <xf:input model="countries" navindex="-1" style="width:10px;"
                                                                  ref="select[2]/@readonly" class="mips"
                                                                  incremental="true">
                                                            <xf:label>readonly</xf:label>
                                                        </xf:input>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <xf:input model="countries" navindex="-1"
                                                                  ref="select[2]/@required" style="width:10px;"
                                                                  class="mips"
                                                                  incremental="true">
                                                            <xf:label>required</xf:label>
                                                        </xf:input>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <xf:input model="countries" navindex="-1"
                                                                  ref="select[2]/@relevant" style="width:10px;"
                                                                  class="mips"
                                                                  incremental="true">
                                                            <xf:label>relevant</xf:label>
                                                        </xf:input>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <xf:input model="countries" navindex="-1"
                                                                  ref="select[2]/@constraint" style="width:10px;"
                                                                  class="mips"
                                                                  incremental="true">
                                                            <xf:label>valid</xf:label>
                                                        </xf:input>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </td>

</tr>
</table>
</xf:case>

<xf:case id="textarea" selected="false">
    <xf:label>Textarea</xf:label>
            <table>
                <tr>
                    <td/>
                    <td align="center" width="9%;"/>
                </tr>

                <tr class="row">
                    <td class="entry">
                        <xf:textarea ref="textarea[1]/value">
                            <xf:label>a standard textarea</xf:label>
                            <xf:hint>This is a standard textarea control</xf:hint>
                            <!-- <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>readonly</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
            </table>
            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>incremental</td>
                    <td><i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>mediatype</td>
                    <td></td>
                </tr>
                <tr>
                    <td>appearance</td>
                    <td></td>
                </tr>
            </table>
<pre>&lt;xf:textarea ref="textarea[1]/value"&gt;
    &lt;xf:label&gt;a textarea&lt;/xf:label&gt;
    &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
    &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
    &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
&lt;/xf:textarea&gt;
</pre>
                            </xf:help> -->
                            <xf:alert>The input value is not valid</xf:alert>
                        </xf:textarea>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" style="width:10px;" ref="textarea[1]/@readonly" class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="textarea[1]/@required" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>required</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="textarea[1]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="textarea[1]/@constraint" style="width:10px;"
                                                      class="mips"
                                                      incremental="true">
                                                <xf:label>valid</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr class="row">
                    <td class="entry">
                        <xf:textarea ref="textarea[3]/value" mediatype="dojo">
                            <xf:label>textarea [mediatype="dojo"]</xf:label>
                            <xf:hint>textarea hint</xf:hint>
                            <!-- <xf:help>see standard textarea</xf:help> -->
                            <xf:alert>The input value is not valid</xf:alert>
                        </xf:textarea>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" style="width:10px;" ref="textarea[3]/@readonly" class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="textarea[3]/@required" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>required</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="textarea[3]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="textarea[3]/@constraint" style="width:10px;"
                                                      class="mips"
                                                      incremental="true">
                                                <xf:label>valid</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
    <table>
        <tr class="row">
            <td class="entry">
                <xf:textarea id="xfTextareaHTML" ref="textarea[2]/value" mediatype="text/html">
                    <xf:label>textarea [mediatype="text/html"]</xf:label>
                    <xf:hint>textarea hint</xf:hint>
                    <!-- <xf:help>see standard textarea</xf:help> -->
                    <xf:alert>The input value is not valid</xf:alert>
                </xf:textarea>
            </td>
            <td valign="top">
                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                        <table width="120px;" cellspacing="5px">
                            <tr>
                                <td>
                                    <xf:input navindex="-1" style="width:10px;" ref="textarea[2]/@readonly" class="mips"
                                              incremental="true">
                                        <xf:label>readonly</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="textarea[2]/@required" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>required</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="textarea[2]/@relevant" style="width:10px;" class="mips"
                                              incremental="true">
                                        <xf:label>relevant</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1" ref="textarea[2]/@constraint" style="width:10px;"
                                              class="mips"
                                              incremental="true">
                                        <xf:label>valid</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</xf:case>

<xf:case id="trigger" selected="false">
<xf:label>Trigger</xf:label>
<div dojoType="dijit.layout.TabContainer" style="width:700px;height:500px" >
		<div id="triggerTab1" dojoType="dijit.layout.ContentPane" title="Trigger Appearances" selected="true" >
                <table>
                <tr>
                    <td width="100px">Trigger with attribute appearance='minimal'</td>
                    <td class="entry">
                        <xf:trigger ref="trigger[1]/value" appearance="minimal">
                            <xf:label ref="../label"/>
                            <xf:message level="modal">Clicked link trigger</xf:message>
                        </xf:trigger>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="trigger[1]/@readonly" style="width:10px;"
                                                      class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <xf:input ref="trigger[1]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>standard Trigger</td>
                    <td class="entry">
                        <xf:trigger ref="trigger[2]/value">
                            <xf:label ref="../label"/>
                            <xf:message>Clicked standard trigger</xf:message>
                        </xf:trigger>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="trigger[2]/@readonly" style="width:10px;"
                                                      class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <xf:input ref="trigger[2]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Trigger with attribute 'src' pointing to a picture</td>
                    <td class="entry">
                        <xf:trigger appearance="compact" src="../resources/images/chiba50t.gif" ref="trigger[3]/value">
                            <xf:label ref="../label"/>
                            <xf:message level="modal">Clicked image trigger</xf:message>
                        </xf:trigger>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="trigger[3]/@readonly" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <xf:input ref="trigger[3]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                        </div>
                    </td>
                </tr>
            </table>
		</div>
		<div id="triggerTab2" dojoType="dijit.layout.ContentPane" title="Trigger Actions">
            <table>
                <tr>
                    <td>Trigger sends debug subnission</td>
                    <td class="entry">
                        <xf:trigger id="t-debug-model-2" ref="trigger[4]/value">
                            <xf:label ref="../label"/>
                            <xf:action>
                                <xf:send submission="s-debug-all-codes"/>
                            </xf:action>
                        </xf:trigger>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="trigger[4]/@readonly" style="width:10px;"
                                                      class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <xf:input ref="trigger[4]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Trigger sends debug subnission</td>
                    <td class="entry">
                        <xf:trigger id="t-debug-country-codes" ref="trigger[5]/value">
                            <xf:label ref="../label"/>
                            <xf:action>
                                <xf:send submission="s-debug-one-code"/>
                            </xf:action>
                        </xf:trigger>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="trigger[5]/@readonly" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <xf:input ref="trigger[5]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>Trigger sends load action with attribute show='new'</td>
                    <td class="entry">
                        <xf:trigger id="t-load-new" ref="trigger[6]/value">
                            <xf:label ref="../label"/>
                            <xf:action>
                                <xf:load resource="http://chiba.sourceforge.net" show="new"/>
                            </xf:action>
                        </xf:trigger>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="trigger[6]/@readonly" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <xf:input ref="trigger[6]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>

                        </div>
                    </td>

                </tr>
                <tr>
                    <td>Trigger sends load action with attribute show='replace'</td>
                    <td class="entry">
                        <xf:trigger id="t-load-replace" ref="trigger[7]/value">
                            <xf:label ref="../label"/>
                            <xf:action>
                                <xf:load resource="http://chiba.sourceforge.net" show="replace"/>
                            </xf:action>
                        </xf:trigger>
                    </td>
                    <td valign="top">
                        <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                            <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                                <table width="120px;" cellspacing="5px">
                                    <tr>
                                        <td>
                                            <xf:input navindex="-1" ref="trigger[7]/@readonly" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>readonly</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                    <tr>

                                        <td>
                                            <xf:input ref="trigger[7]/@relevant" style="width:10px;" class="mips"
                                                      incremental="true">
                                                <xf:label>relevant</xf:label>
                                            </xf:input>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </td>
                </tr>
            </table>
		</div>
</div>
</xf:case>

<!--<xf:case id="upload" selected="false">
    <xf:label>Upload</xf:label>
    <table>
        <tr class="row">
            <td class="entry" style="width:450px;">
                <xf:upload ref="upload[1]/value">
                    <xf:label>a standard input</xf:label>
                    <xf:hint>upload hint </xf:hint>
                     <xf:help><table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Bind Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>readonly</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>required</td>
                    <td>expressions evaluating to <i>true</i> or <b><i>false</i></b></td>
                </tr>
                <tr>
                    <td>relevant</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>constraint</td>
                    <td>expressions evaluating to <b><i>true</i></b> or <i>false</i></td>
                </tr>
                <tr>
                    <td>calculate</td>
                    <td>calculates a value for the referenced node</td>
                </tr>
                <tr>
                    <td>type</td>
                    <td>anyURI</td>
                </tr>
            </table>
            <table class="helpAttributeTable">
                <tr class="helpAttributeTableHeader">
                    <td style="width:102px">Control Attribute</td>
                    <td style="width:220px">Value (default value is displayed bold)</td>
                </tr>
                <tr>
                    <td>incremental</td>
                    <td><i>true</i> or <b><i>false</i></b></td>
                </tr>
            </table>

<pre>&lt;xf:upload ref="upload[1]/value"&gt;
    &lt;xf:label&gt;a standard input&lt;/xf:label&gt;
    &lt;xf:filename ref="attribute::file"/&gt;
    &lt;xf:mediatype ref="attribute::type"/&gt;
    &lt;xf:hint&gt;Hint Text&lt;/xf:hint&gt;
    &lt;xf:help&gt;Help Text&lt;/xf:help&gt;
    &lt;xf:alert&gt;Alert Text&lt;/xf:alert&gt;
&lt;/xf:upload&gt;
</pre>
                    </xf:help>

                    <xf:alert>A value for upload control is required</xf:alert>
                    <xf:filename ref="attribute::file"/>
                    <xf:mediatype ref="attribute::type"/>
                </xf:upload>
            </td>
            <td valign="top">
                <div dojoType="dijit.form.DropDownButton" label="" showLabel="false" tabindex="-1">
                    <div dojoType="dijit.TooltipDialog" title="edit Model Item Properties">
                        <table width="120px;" cellspacing="5px">
                            <tr>
                                <td>
                                    <xf:input navindex="-1" style="width:10px;"
                                              ref="upload[1]/@readonly"
                                              class="mips"
                                              incremental="true">
                                        <xf:label>readonly</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1"
                                              ref="upload[1]/@required" style="width:10px;"
                                              class="mips"
                                              incremental="true">
                                        <xf:label>required</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1"
                                              ref="upload[1]/@relevant" style="width:10px;"
                                              class="mips"
                                              incremental="true">
                                        <xf:label>relevant</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <xf:input navindex="-1"
                                              ref="upload[1]/@constraint" style="width:10px;"
                                              class="mips"
                                              incremental="true">
                                        <xf:label>valid</xf:label>
                                    </xf:input>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

            </td>
        </tr>
    </table>
</xf:case>-->
<xf:case id="source" selected="false">
    <xf:label>Report a bug</xf:label>
    <div style="display:block;height:30px;padding-top:50px;">
        <center>
            <span style="font-size:12pt;">If you find problems or have suggestions about this page, please open up a ticket on our Wiki.</span>
            <br/><br/>
            <xf:trigger id="reportBug">
                <xf:label>Report a Bug</xf:label>
                <xf:load resource="https://www.chiba-project.org/trac/newticket?summary=Repeat%20Test%20Bug&amp;description=Please%20describe%20the%20bug%20you%20experienced%20here.%20Don%27t%20forget%20to%20note%20which%20steps%20brought%20up%20the%20error" show="new"/>
            </xf:trigger>
        </center>
    </div>
<!--
    <div dojoType="dijit.layout.ContentPane">
        <div class="head1" style="margin:5px;font-size:large;">allcomponents.xhtml Source Code Viewer</div>
        <div dojoType="dijit.layout.ContentPane" href="http://localhost:8080/chiba-web/resources/jsp/showSource.jsp?sourceFile=/forms/demo/allcomponents.xhtml" ></div>
    </div>
-->

</xf:case>
</xf:switch>
</div>
</body>
</html>
